<template>

  <div>
    <input
      :type="type"
      class="myinput"
      :class="{ seres: flag, error: !flag }"
      @input="hm"
      @blur="handleBlur"
    >
  </div>
</template>

<script>
export default {
  props: {
    rules: {
      type: RegExp,
      default: ''
    },
    type: {
      type: String,
      default: 'wer'
    },
    msg: {
      type: String,
      default: 'wer'
    }
  },
  data() {
    return {
      flag: true
    }
  },
  methods: {
    hm(e) {
      const v = e.target.value // 根据用户传递的规则进行数据验证
      if (this.rules) {
        // 说明传递了验证规则
        // 进行验证
        // test是正则的验证方法，返回bool值
        if (this.rules.test(v)) {
          this.flag = true
        } else {
          this.flag = false
        }
      }
      this.$emit('input', v)
    },
    handleBlur(e) {
      const value = e.target.value
      if (this.rules && !this.rules.test(value)) {
        this.$toast.fail({
          message: this.msg,
          duration: 3000,
          position: 'top'
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.myinput {
  display: block;
  width: 88vw;
  height: 40px;
  outline: none;
  border: none;
  line-height: 40px;
  font-size: 20px;
  color: #fff;
  margin-top: 20px;
  border-bottom: 2px solid #ccc;
}
.seres {
  color: #07e249;
  border-bottom: solid 2px#07e249;
}
.error {
  color: #07e249;
  border-bottom: solid 2px#1e699f;
}
</style>
